import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import MarketReview from './pages/MarketReview';
import RealTimeMarket from './pages/RealTimeMarket';
import ManipulateStrategy from './pages/ManipulateStrategy';
import ModelTraining from './pages/ModelTraining';
import MarketDataDownload from './pages/MarketDataDownload';
import DrawdownControl from './pages/DrawdownControl';
import AccountCurve from './pages/AccountCurve';
import StockFinder from './pages/StockFinder';

function App() {
  const [sidebarVisible, setSidebarVisible] = useState(false);
  // const [activePage, setActivePage] = useState('home');
  const navigate = useNavigate(); // 添加 useNavigate 钩子
  const location = useLocation();

  // 根据当前路径确定活动页面
  const getActivePage = () => {
    if (location.pathname.startsWith('/market-review')) return 'market-review';
    if (location.pathname.startsWith('/real-time')) return 'real-time';
    if (location.pathname.startsWith('/strategy')) return 'strategy';
    if (location.pathname.startsWith('/stock-finder')) return 'stock-finder';
    if (location.pathname.startsWith('/training')) return 'training';
    return 'home';
  };
  
  const activePage = getActivePage();
  
  // 监听路由变化，确保侧边栏状态正确
  useEffect(() => {
    // 根据当前路径设置侧边栏状态
    if (location.pathname === '/') {
      setSidebarVisible(false);
    } else if (location.pathname.startsWith('/market-data-download')) {
      setSidebarVisible(false);
    } else {
      setSidebarVisible(true);
    }
  }, [location.pathname]);
  const toggleSidebar = (action) => {
    if (action === 'download') {
      // 导航到数据下载页面
      navigate('/market-data-download');
      setSidebarVisible(false); // 数据下载页面不需要显示侧边栏
    } else {
      setSidebarVisible(!sidebarVisible);
    }
  };
  
  const handleNavigation = (page) => {
    setSidebarVisible(page !== 'home');
    
    // 根据页面ID导航到对应路由
    switch(page) {
      case 'home':
        navigate('/');
        setSidebarVisible(false);
        break;
      case 'market-review':
        navigate('/market-review/market-performance');
        setSidebarVisible(true);
        break;
      case 'real-time':
        navigate('/real-time/today');
        setSidebarVisible(true);
        break;
      case 'strategy':
        navigate('/strategy/stock-label');
        setSidebarVisible(true);
        break;
      case 'stock-finder':
        navigate('/stock-finder/stock-tags');
        setSidebarVisible(true);
        break;
      case 'training':
        navigate('/training/overall-situation');
        setSidebarVisible(true);
        break;
      default:
        navigate('/');
    }
  };

  return (
    <div className="app-container">
      <Header 
        onMenuClick={toggleSidebar} // 菜单点击事件
        onNavClick={handleNavigation} // 导航点击事件（一级） 
        activePage={activePage}
      />
      
      <div className="main-content">
        <Sidebar 
          visible={sidebarVisible} 
          activePage={activePage}
          onNavClick={(page, subpage) => {
            if (subpage) {
              navigate(`/${page}/${subpage}`);
            }
          }}
        />
        
        <div className={`content-area ${sidebarVisible ? 'with-sidebar' : ''}`}>
          <Routes>
            <Route path="/" element={<Home />} />
            
            {/* 每日复盘路由 */}
            <Route path="/market-review/:subpage" element={<MarketReview />} />
            <Route path="/market-review" element={<MarketReview />} />
            
            
            {/* 实时盘面路由 */}
            <Route path="/real-time/:subpage" element={<RealTimeMarket />} />
            <Route path="/real-time" element={<RealTimeMarket />} />
            
            {/* 交易策略路由 */}
            <Route path="/strategy/:subpage" element={<ManipulateStrategy />} />
            <Route path="/strategy" element={<ManipulateStrategy />} />

            {/* 个股挖掘路由 */}
            <Route path="/stock-finder/:subpage" element={<StockFinder />} />
            <Route path="/stock-finder" element={<StockFinder />} />
            
            {/* 模型训练路由 */}
            <Route path="/training/:subpage" element={<ModelTraining />} />
            <Route path="/training" element={<ModelTraining />} />
            
            {/* 市场数据下载路由 */}
            <Route path="/market-data-download" element={<MarketDataDownload />} />
            <Route path="/market-review/position-control" element={<DrawdownControl />} />
            <Route path="/market-review/account-curve" element={<AccountCurve />} />
            
            {/* 添加重定向确保首页正确显示 */}
            <Route path="*" element={<Home />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}

// 创建包装组件以在 Router 上下文中使用 useNavigate
export default function WrappedApp() {
  return (
    <Router>
      <App />

    </Router>
  );
}